﻿@page "/Stack"

<h1>Stack</h1>

<p>
    A <code>FluentStack</code> is a container-type component that can be used to arrange its child components in a horizontal or vertical stack.
</p>
<h2 id="characteristics">Characteristics</h2>
<p>
    Although the <code>FluentStack</code> component has a number of different parameters, there are some in particular that define
    the overall layout that the component has:
</p>
<ol start="1">
    <li>
        Orientation: Refers to whether the stacking of child components is horizontal (default) or vertical. 
    </li>
    <li>Alignment: Refers to how the child components are aligned inside the container. This is controlled via the 
        <code>HorizontalAlignment</code> and <code>VerticalAlignment</code> parameters. 
    </li>
    <li>
        Spacing: Refers to the space that exists between child components inside the <code>Stack</code>. This is 
        controlled via the <code>HorizontalGap</code> and <code>VerticalGap</code> parameters.
    </li>
</ol>
<h2 id="wrapping">Wrapping</h2>
<p>
    Aside from the previously mentioned parameters, there is another parameter called <code>Wrap</code> that determines 
    if items overflow the <code>FluentStack</code> container or wrap around it. The wrap property only works in the direction of the <code>FluentStack</code>, 
    which means that the children components can still overflow in the perpendicular direction (i.e. in a vertical <code>FluentStack</code>, items might 
    overflow horizontally and vice versa).
</p>
<h2 id="nesting">Nesting</h2>
    <p>Stacks can be nested inside one another in order to be able to configure the layout of the application as desired.
</p>

<h2 id="example">Examples</h2>

<DemoSection Component="typeof(StackDefaultExample)" Title="Default example">
    <Description>
        This <code>FluentStack</code> is using all the default settings for its parameters. To make it clear what the default size is, it is rendered with a border here.
    </Description>
</DemoSection>

<DemoSection Component="typeof(StackExample)" Title="Using the FluentStack component">
    <Description>
        This example shows two <code>FluentStack</code>s. The first <code>FluentStack</code> has its <code>Orientation</code> parameter set
        to <code>Orientation.Vertical</code>. Its height has been set to 200 pixels and the <code>VerticalGap</code> has been set to 20 pixels. The second, 
        nested, <code>FluentStack</code> has its <code>Orientation</code> parameter set to <code>Orientation.Horizontal</code>. The <code>HorizontalGap</code>
        has been set to 4 pixels. Its first element contains a forced break. No height has been set, so the container height adjusts to the height 
        of the highest element.
        <br />
        The alignment of the contents of <strong>both</strong> <code>FluentStack</code>s can be changed by selecting one the different options from each
        of the listboxes (which are placed in a <code>FluentStack</code> themselves as well).
    </Description>
</DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentStack)" />
